<template>
  <SplitLayout :leftWidth="'250px'">
    <div slot="left" class="left">
      <AreaTree class="treeBox" @selectItems="selectItem" rootOpened="true"/>
    </div>
    <div slot="top" class="header-top">
      <a-form-model v-bind="formItemLayout" class="formBox">
        <a-col :span="8">
          <a-form-model-item label="物资名称">
            <a-input v-model="form.materialName" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item :wrapper-col="{ offset: 0 }">
            <a-space style="padding-left: 20px;">
              <a-button type="primary" @click="onQuery"> 查询 </a-button>
              <a-button @click="onResetForm"> 重置 </a-button>
            </a-space>
          </a-form-model-item>
        </a-col>
      </a-form-model>
    </div>
    <div class="con-content">
      <a-button style="margin-bottom:10px;" :load="confirmLoading" @click="onImport"> 导入 </a-button>
      <a-button style="margin-bottom:10px; margin-left: 10px"  type="primary" @click="onAdd"> 新增物资 </a-button>
      <div class="con-content-list">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="pageData"
          :showSelection="false"
          :showPagination="true"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="materialsName" slot-scope="text, record">
            <div>{{record.materialsName.toString()}}</div>
          </template>
          <template slot="action" slot-scope="text, record">
            <a style="padding: 0 5px" @click="onView1(record)">删除</a>
            <a style="padding: 0 5px" @click="onView2(record)">编辑</a>
            <a style="padding: 0 5px" @click="onView3(record)">查看</a>
            <a style="padding: 0 5px" @click="onView4(record)">调用</a>
          </template>
        </CustomTable>
      </div>
    </div>
    <div>
      <a-modal v-model="visible" title="导入" @ok="handleOk" width="600px" centered>
        <Input ref="input" @warn="warn"></Input>
      </a-modal>
      <a-modal v-model="visible1" title="错误地点" @ok="handleOk1" width="600px" centered>
        <!--        <Input ref="input"></Input>-->
        <div v-for="item of this.warns">
          <div style="color: red;font-size: 15px">{{item}}</div>
        </div>
      </a-modal>
      <a-modal v-model="visible2" title="物资调用" @ok="handleOk2" width="1000px" centered>
        <!--        <Input ref="input"></Input>-->
        <transfer ref="transfer" :id="id" :storageLocation="storageLocation" @objData="objData"></transfer>
      </a-modal>
      <a-modal v-model="visible3" title="再次确认" @ok="handleOk3">
        <div>您确定要删除此数据</div>
      </a-modal>
    </div>

  </SplitLayout>
</template>
<script>
import SplitLayout from '@/components/zxd/layouts/SplitLayout'
// import api from "@/api/specialExamine";
import AreaTree from './tree.vue'
import { getfrom, getXLlist } from '@api/xlgc/lawCase'
import { deleteWz, listIndex } from '@api/xlgc/Res'
import CustomTable from '@/components/zxd/Table/CustomTable'
import Input from './ImportModal'
import transfer from './transfer'
// import VideoPlayer from '@/components/videoPlayer.vue'
// import * as dataApi from '@/api/xnGas/dataApi.js'
export default {
  components: {
    SplitLayout,
    AreaTree,
    CustomTable,
    Input,
    transfer
    // VideoPlayer
  },
  data() {
    return {
      deleteid:'',
      id:'',
      storageLocation:'',
      visible:false,
      visible1:false,
      visible2:false,
      visible3:false,
      region:'',
      pageData: [],
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          width: 100,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.index - 1) * this.pageFilter.size + (index + 1)}` //序号分页后连续
        },
        {
          title: '详细地址',
          dataIndex: 'storageLocation',
          align: 'left',
          scopedSlots: { customRender: 'storageLocation' }
          // width: 200
        },
        {
          title: '物资名称',
          dataIndex: 'materialsName',
          align: 'center',
          scopedSlots: { customRender: 'materialsName' }
          // width: 150
        },
        {
          title: '联系方式',
          dataIndex: 'contactInformation',
          align: 'center',
          // width: 230,
          scopedSlots: { customRender: 'contactInformation' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200
        }
      ],
      pageFilter: {
        index: 1,
        size: 10
      },
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 19 }
      },
      form: {
        materialName:'',
        storageLocation:''
      },
      rangePickerTime: [],
      confirmLoading: false,
      isDetail: false,
      detailInfo: {},
      street:[],
      fromCode:'',
      warns:[],
      pass:''
    }
  },

  created() {
    // this.initDictValue();
    // this.refreshTable();
    // this.map()
    // this.onQuery()
  },
  mounted() {
    if(this.$route.query.from){
      this.selectItem([this.$route.query.from])
    }else{
      this.refreshTable(Object.assign({},this.pageFilter))
    }

  },
  methods: {
    objData(val){
      console.log(val)
      if(val){
        this.visible2 = false
      }
    },
    warn(val){
      if(val){
        console.log(val)
        this.visible = false
        this.refreshTable(this.pageFilter)
      }else{
        console.log(val)
        this.warns = val.result
        if(!val.success){
          console.log(this.warns)
          this.visible1 = true
        }
      }
    },
    handleOk1(){
      this.visible1 = false
    },
    handleOk2(){
      this.$refs.transfer.planning()

    },
    handleOk(e) {
      console.log(e);
      this.$refs.input.handleOk()
      if(this.pass){
        this.visible = false
      }

    },
    selectItem(val){
      this.fromCode = val[0]
      console.log(this.fromCode)
      this.refreshTable(Object.assign({}, this.pageFilter, { region: val[0] }))
    },
    onAdd(){
      this.$router.push({
        path: '/addRes',
        query:{
          item:true,
          from:this.fromCode
        }
      })
    },
    refreshTable(val) {
      this.loading = true
      listIndex(val)
        .then(res => {
          console.log(res)
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },

    onQuery() {
      this.refreshTable(Object.assign({}, this.pageFilter, { region:this.fromCode},this.form))
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'index' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(Object.assign({}, this.pageFilter, { region:this.fromCode},this.form))
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onImport() {
      this.visible = true
    },
    getImportUrl() {
      // return dataApi.equipmentImportUrl
    },
    importOk() {
      this.onQuery()
    },
    onGunClick(url) {
      this.$refs.videoPlayerId.setVideoUrl(url)
    },
    handleOk3(){
      deleteWz(this.deleteid).then(res => {
        console.log(res)
        if(res.success){
          this.$message.success(res.message, 2,);
          this.visible3 = false
          this.refreshTable(Object.assign({}, this.pageFilter, { region:this.fromCode}))
        }else{
          this.$message.warn(res.message, 2,);
        }
      }).catch(res => {
        this.$message.warn('请求失败！')
        this.visible3 = false
      })
    },
    onView1(record) {
      this.visible3 = true
      // this.handleOk3(record.id)
      this.deleteid = record.id
    },
    onView2(record) {
      console.log(record)
      this.$router.push({
        path:'/addRes',
        query:{
          id:record.id,
          item:false
        }
      })
    },
    onView3(record) {
      console.log(record)
      this.$router.push({
        path:'/AgencyDetails',
        query:{
          // name:record.storageLocation,
          id:record.id
        }
      })
    },
    onView4(record) {
      console.log(record)
      this.visible2 = true
      this.id = record.id
      this.storageLocation = record.storageLocation
    },

  }
}
</script>
<style scoped lang="less">
.treeBox {
  width: 95%;
  margin: 0px auto;
  border: 1px solid #ccc;
  padding: 10px;
}
.header-top {
  position: relative;
  // height: 600px;
  .formBox {
    position: relative;
    top: 11px;
    left: 20px;
  }
}
.con-content-top {
  margin-bottom: 20px;
}
/deep/.ant-layout-content {
  padding: 0 0 24px 0 !important;
}
.detailBox {
  .playerBox {
    float: left;
    width: 70%;
  }
  .infoBox {
    float: left;
    margin-left: 30px;
    padding: 10px 0 0 10px;
    .p1 {
      font-size: 18px;
      font-weight: bold;
    }
    background-color: #fafafa;
  }
}
.carouselBox {
  margin-top: 20px;
}
.carouselBox .ant-carousel .slick-slide {
  height: 300px;
  overflow: hidden;
  background: #fff;
}
.carouselBox .ant-carousel .slick-slide .hotBox {
  width: 16%;
  float: left;
  margin-left: 2.5%;
}
.carouselBox .ant-carousel .slick-slide .hotBox img {
  width: 100%;
  height: 100px;
  cursor: pointer;
}
.carouselBox .ant-carousel .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #000;
  // background-color: rgba(31, 61, 35, 0.11);
  opacity: 0.5;
}
.carouselBox .ant-carousel .custom-slick-arrow:before {
  display: none;
}
.carouselBox .ant-carousel .custom-slick-arrow:hover {
  opacity: 0.7;
}
</style>
